<template>
	<div>
		<!--开发方案-->
		<HyCard :title="hyCard1.title" class="HyCard">
			<HyFormCopy ref="irsForm1" :hyFormConfig="searchConfig" :hyFormDefault="searchDefault1" :hyFormFields="searchFields1"></HyFormCopy>
		</HyCard>
		<!--数字化应用需求现状-->
		<HyCard :title="hyCard2.title" class="HyCard">
			<HyFormCopy ref="irsForm2" :hyFormConfig="searchConfig" :hyFormDefault="searchDefault2" :hyFormFields="searchFields2"></HyFormCopy>
		</HyCard>
		<!--附件-->
		<HyCard :title="hyCard3.title" class="HyCard">
			<div class="uploadDiv">
				<span class="span-require">* </span>
				<span>请上传项目设计方案，项目开发方案等材料： </span
				><el-button link type="primary" @click="downLoadFile('数字化应用开发方案.docx')">模板下载</el-button>
				<el-upload
					v-model:file-list="decCardList1"
					class="upload-demo"
					:action="baseURL + '/admin/sys-file/upload'"
					multiple
					:before-upload="(file) => beforeUpload(file, fileList(2).accept)"
					:accept="fileList(2).accept"
					:headers="headers"
				>
					<el-button type="primary" icon="Upload">上传附件</el-button>
					<template #tip>
						<div class="el-upload__tip"><span class="span-require">*</span>{{ fileList(2).tips }}</div>
					</template>
				</el-upload>
			</div>
		</HyCard>
		<!-- <el-button @click="confirm">确认</el-button> -->
	</div>
</template>

<script setup lang="ts">
import HyCard from '/@/components/HyCard/index.vue';
import HyFormCopy from '/@/components/HyFormCopy/index.vue';
import HyTable from '/@/components/HyTable/index.vue';
import TableForm from './tableForm.vue';
import { Session } from '/@/utils/storage';
import UploadFile from './uploadFile.vue';
import type { TabsPaneContext } from 'element-plus';
import { beforeUpload, isNull, fileList, downLoadFile } from '../hooks/index';
const props = defineProps({
	secondTabList: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
const appCode = ref('');
const createBy = ref('');
const secondTabListtData = ref();
watch(
	() => props.secondTabList,
	(val) => {
		if (val) {
			secondTabListtData.value = val;
			setList();
		}
	}
);
//获取子组件实例
const irsForm1 = ref();
const irsForm2 = ref();
const irsForm3 = ref();
const decCardList1 = ref([]);
const searchDefault1 = ref({
	introduction: '',
	target: '',
});
const searchDefault2 = ref({
	systemStatus: '',
	dataStatus: '',
	netStatus: '',
	basicStatus: '',
});
const createTime = ref('');
const declareId = ref('');
const developId = ref('');
const types = {
	'1': decCardList1,
};
const searchConfig = ref({
	labelWidth: '120px',
	span: 6,
	offset: 0,
	type: 'submit',
});
const setList = () => {
	appCode.value = secondTabListtData.value.dveInfo?.appCode;
	createBy.value = secondTabListtData.value.dveInfo?.createBy;
	createTime.value = secondTabListtData.value.dveInfo?.createTime;
	declareId.value = secondTabListtData.value.dveInfo?.declareId;
	developId.value = secondTabListtData.value.dveInfo?.developId;
	const NO1 = {
		target: secondTabListtData.value.dveInfo.target || '',
		introduction: secondTabListtData.value.dveInfo.introduction || '',
	};
	const NO2 = {
		systemStatus: secondTabListtData.value.dveInfo.systemStatus || '',
		basicStatus: secondTabListtData.value.dveInfo.basicStatus || '',
		dataStatus: secondTabListtData.value.dveInfo.dataStatus || '',
		netStatus: secondTabListtData.value.dveInfo.netStatus || '',
	};
	decCardList1.value = secondTabListtData.value.files || [];
	searchDefault1.value = { ...NO1 };
	searchDefault2.value = { ...NO2 };
};
const headers = computed(() => {
	return {
		Authorization: 'Bearer ' + Session.get('token'),
		'TENANT-ID': Session.getTenant(),
	};
});
//申报时提交的数据汇总
const dataList = ref({});
const confirm = () => {
	let filesArr = [];
	decCardList1.value.forEach((item) => {
		filesArr.push({
			name: item.name || item.response.data.name,
			url: item.url || item.response.data.url,
			id: item.id || item.response.data.id,
		});
	});
	dataList.value = {
		dev: {
			dveInfo: {
				developId: developId.value, //对应irs列表的数字化应用开发方案
				appCode: appCode.value,
				...irsForm1.value.hyForm,
				...irsForm2.value.hyForm,
				createBy: createBy.value,
				createTime: createTime.value,
			},
			files: filesArr,
		},
	};
};

const hyCard1 = ref({
	title: '开发方案',
});
const hyCard2 = ref({
	title: '数字化应用需求现状',
});
const hyCard3 = ref({
	title: '附件',
});

const searchFields1 = ref({
	introduction: {
		type: 'textarea',
		label: '应用简介',
		placeholder: '简述应用主要开发内容和功能设计',
		maxlength: 1000,
		rows: 3,
		span: 24,
		required: true,
	},
	target: {
		type: 'textarea',
		label: '开发目标',
		placeholder: '简述应用的开发目标',
		maxlength: 1000,
		rows: 3,
		span: 24,
		required: true,
	},
});
const searchFields2 = ref({
	systemStatus: {
		type: 'textarea',
		label: '应用系统现状',
		placeholder: '请介绍责任部门包括但不限于，业务系统及系统软件清单、安全系统、运维系统等现状等',
		maxlength: 1000,
		rows: 3,
		span: 24,
		required: true,
	},
	dataStatus: {
		type: 'textarea',
		label: '数据资源开发利用现状',
		placeholder: '简述责任部门资源开发的利用现状',
		maxlength: 1000,
		rows: 3,
		span: 24,
		required: true,
	},
	netStatus: {
		type: 'textarea',
		label: '网络系统现状',
		placeholder: '简述责任部门网络系统现状',
		maxlength: 1000,
		rows: 3,
		span: 24,
		required: true,
	},
	basicStatus: {
		type: 'textarea',
		label: '数字化应用基础设施现状',
		placeholder: '简述责任部门数字化应用基础设施现状',
		maxlength: 1000,
		rows: 3,
		span: 24,
		required: true,
	},
});
defineExpose({ dataList, confirm });
</script>

<style scoped lang="scss">
.HyCard {
	margin-top: 10px;
}
.IRSbox {
	display: flex;
	flex-wrap: nowrap;
	div,
	.button {
		margin-left: 10px;
	}
}
.isForm {
	margin-top: 10px;
}
.TableForm {
	margin-top: 10px;
}
.uploadDiv {
	width: 100%;
	span {
		display: inline-block;
		margin: 10px 0;
	}
}
.span-require {
	color: red;
}
</style>